import React, { useState } from "react";
import { TextField, PrimaryButton, Stack } from "@fluentui/react";
import { stackStyles, stackTokens, columnProps } from "./stack-config";

export function Award() {
  const [username, setUsername] = useState("");
  const [alias, setAlias] = useState("");
  const [gmUsername, setGmUsername] = useState("");
  const [gmPassword, setGmPassword] = useState("");
  function handleUsernameChange(_e: unknown, newValue?: string) {
    setUsername(newValue ?? "");
  }
  function handleAliasChange(_e: unknown, newValue?: string) {
    setAlias(newValue ?? "");
  }
  function handleGmUsernameChange(_e: unknown, newValue?: string) {
    setGmUsername(newValue ?? "");
  }
  function handleGmPasswordChange(_e: unknown, newValue?: string) {
    setGmPassword(newValue ?? "");
  }
  function submit() {
    console.log(username, alias, gmUsername, gmPassword);
  }
  return (
    <Stack horizontal tokens={stackTokens} styles={stackStyles}>
      <Stack {...columnProps}>
        <TextField
          name="username"
          label="用户名"
          required
          onChange={handleUsernameChange}
        />
        <TextField
          name="alias"
          label="奖品代码"
          required
          onChange={handleAliasChange}
        />
        <PrimaryButton
          text="发放奖品"
          onClick={submit}
          style={{ marginTop: 10, marginBottom: 50 }}
        />
      </Stack>
      <Stack {...columnProps}>
        <TextField
          name="gm_username"
          label="验证GM用户名"
          required
          onChange={handleGmUsernameChange}
        />
        <TextField
          name="gm_password"
          label="验证GM密码"
          required
          type="password"
          canRevealPassword
          onChange={handleGmPasswordChange}
        />
      </Stack>
    </Stack>
  );
}
